<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function extend(Child, Parent) {
				var F = function(){};
				F.prototype = Parent.prototype;
				Child.prototype = new F();
				Child.prototype.constructor = Child;
			}
						
			// 图片轮播类
			var LoopImages = function(imgArr, container){
			  this.imagesArray = imgArr;	// 轮播图片数组
			  this.container = container;	// 轮播图片容器
			}
			LoopImages.prototype = {
			 	// 创建轮播图片
				createImage : function(){
			  		console.log('LoopImages createImage function');
			  	},
			  	// 切换下一张图片
			  	changeImage : function(){
			  		console.log('LoopImages changeImage function');
			  	}
			}
			// 上下滑动切换类
			var SlideLoopImg = function(imgArr, container){
			  	// 构造函数继承图片轮播类
			  	LoopImages.call(this, imgArr, container);
			}
			// SlideLoopImg.prototype = new LoopImages();
			extend(SlideLoopImg, LoopImages);
			// 重写继承的切换下一张图片方法
			SlideLoopImg.prototype.changeImage = function(){
			  	console.log('SlideLoopImg changeImage function');
			}
			// 渐隐切换类
			var FadeLoopImg = function(imgArr, container, arrow){
			  	LoopImages.call(this, imgArr, container);
			  	// 切换箭头私有变量
			  	this.arrow = arrow;
			}
			// FadeLoopImg.prototype = new LoopImages();
			extend(FadeLoopImg, LoopImages);
			FadeLoopImg.prototype.changeImage = function(){
			  	console.log('FadeLoopImg changeImage function');
			}
			// 测试用例
			var fadeImg = new FadeLoopImg(['01.jpg', '02.jpg', '03.jpg'], 'slide', ['left.jpg', 'right.jpg']);
			  console.log(fadeImg.container);	// slide
			  fadeImg.changeImage();            // FadeLoopImg changeImage function
			  
			// 原型对象是一个共享的对象，既然被共享，那么对原型对象的拓展
			// 无论是子类或者父类的实例对象都会继承下来
			LoopImages.prototype.getImageLength = function(){
			  	return this.imagesArray.length;
			}
			FadeLoopImg.prototype.getContainer = function(){
			  	return this.container;
			}
			// 测试
			console.log(fadeImg.getImageLength());		// 3
			console.log(fadeImg.getContainer()); 		// slide
		</script>
	</body>
</html>
